<template>
	<view class="indexPage">
		<!-- 搜索部分 -->
		<view class="searchBox">
			<view class="inputBox">
				<input type="text" placeholder="查询" @focus="showSearch()" @blur="hideSearch()">
			</view>
			<view class="searchIcon">图标</view>
		</view>
		<!-- 搜索主体 -->
		<view class="searchBlock" v-show="isShowSearch" id="search">
			<search-page :search-data="searchData"></search-page>
		</view>
		<!-- /搜索部分 -->
		<view class="clockInBox">
			<view class="title">
				已打卡天数
			</view>
			<view class="days">
				{{days}}
			</view>
		</view>
		<view class="bookBox">
			<view class="title">{{book.name}}</view>
			<view class="progressBar">
				<progress :percent="book.progress" activeColor="#838ec7" stroke-width="3" />
			</view>
			<view class="bookData">
				<view class="studied">
					已学:
					<text>{{book.percent}}%</text>
				</view>
				<view class="allStudy">
					{{book.studied}}/{{book.allStudy}}词
				</view>
			</view>
		</view>
		<view class="startStudy">
			<view class="todayStudy">
				待学词{{todayStudy.studied}}/{{todayStudy.allStudy}}
			</view>
			<view class="startBtn" @click="toStudy">
				<text>开始学习</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchData:{
					title:"历史搜索",
					isShowDel:true,
					words:[
						{
							word:"the",
							translate:"art. 这 ; 那 adv. 更加",
							isNew:false
						},
						{
							word:"the",
							translate:"art. 这 ; 那 adv. 更加",
							isNew:true
						},
						{
							word:"the",
							translate:"art. 这 ; 那 adv. 更加",
							isNew:false
						},
						{
							word:"the",
							translate:"art. 这 ; 那 adv. 更加",
							isNew:false
						}
					]
				},
				isShowSearch: false, // 是否显示搜索栏
				days: 0,
				book: {
					name: "四级真题核心词汇书",
					progress: 80,
					percent: 0,
					studied: 100,
					allStudy: 1510,
				},
				todayStudy: {
					studied: 0,
					allStudy: 10
				}

			}
		},
		onLoad() {
			this.getBookData()
			const data = this.book
			let percent = data.studied / data.allStudy * 100
			this.book.percent = percent.toFixed(2)
			this.book.progress = this.book.percent
		},
		methods: {
			getBookData() {
				// TODO: 获取当前课本信息
			},
			toStudy() {
				uni.navigateTo({
					url: "/pages/word/word"
				})
			},
			// 消失动画没想好怎么写 下边这种写法会导致无法获取已经隐藏的searchdom
			showSearch() {
				this.isShowSearch = true
				// document.getElementById("search").style.animationName = "fadeout"
			},
			hideSearch(){
				// document.getElementById("search").style.animationName = "fadein"
				this.isShowSearch = false
			}


		}
	}
</script>

<style>
	.indexPage {
		width: 21.94rem;
		margin: 0 auto;
	}

	.searchBox {
		position: relative;
		margin-bottom: 4rem;
	}

	.searchBox input {
		width: 19.94rem;
		height: 2.25rem;
		padding: 0 1rem;
		line-height: 1.25rem;
		border-radius: 1.5rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(0, 82, 217, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: Arial;
	}

	.searchBox .searchIcon {
		position: absolute;
		right: 1rem;
		top: 0.5rem;
	}

	.clockInBox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.clockInBox .title {
		color: rgba(51, 51, 51, 1);
		font-size: 0.88rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.clockInBox .days {
		color: rgba(16, 16, 16, 1);
		font-size: 3rem;
		text-align: center;
		font-family: PingFangSC-regular;
	}

	.bookBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 18.75rem;
		height: 4.44rem;
		padding: 1rem 1.75rem;
		line-height: 1.25rem;
		border-radius: 0.94rem;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 0.88rem;
		font-family: Arial;
		margin: 4rem 0;
	}

	.bookBox .title {
		width: 18.75rem;
		text-align: left;
	}

	.progressBar {
		width: 18.75rem;
		height: 0.19rem;
		line-height: 1.25rem;
		border-radius: 1.56rem;
		background-color: rgba(224, 227, 234, 1);
		text-align: center;
	}

	.bookBox .bookData {
		width: 18.75rem;
		display: flex;
		justify-content: space-between;
		color: rgba(115, 113, 113, 1);
		font-size: 0.63rem;
		text-align: left;
		font-family: PingFangSC-regular;
	}

	.startStudy {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.startStudy .todayStudy {
		color: rgba(51, 51, 51, 1);
		font-size: 0.75rem;
		text-align: center;
		font-family: PingFangSC-regular;
		margin-bottom: 1rem;
	}

	.startStudy .startBtn {
		width: 12.06rem;
		height: 2.38rem;
		border-radius: 1.19rem;
		/* background-color: rgba(131, 142, 199, 1); */
		background-color: var(--theme--color);
		color: #fff;
		text-align: center;
		box-shadow: 0rem 0.13rem 0.5rem 0.06rem rgba(0, 0, 0, 0.24);
		line-height: 2.38rem;
	}

	/* 搜索主体 */
	.searchBlock {
		position: absolute;
		right: 0;
		left: 0;
		top: 3rem;
		margin: 0 auto;
		background-color: var(--background--color);
		text-align: center;
		font-family: -apple-system;
		width: 22rem;
		height: 36.88rem;
		border-radius: 0.63rem;
		font-size: 0.88rem;
		animation-name: fadein ;
		animation-duration: 0.3s;
	}

	@keyframes fadein {
		from {
			top: 2.5rem;
			opacity: 0;
		}

		to {
			top: 3rem;
			opacity: 1;
		}
	}

	@keyframes fadeout {
		from {
			top: 3rem;
			opacity: 1;
		}

		to {
			top: 2.5rem;
			opacity: 0;
		}
	}
</style>